import styles from "./index.module.less";
import { memo, useState } from "react";
import AMap from "@/components/AMap";
import TaskPie from "../Dashboard/components/TaskPie";
import CarInfo from "./components/CarInfo";
import MidModule from "./components/MidModule";
import Header from "../Dashboard/components/Header";
import TimeTrend from "./components/TimeTrend";
import Camera from "./components/Camera";
import useWebSocket from "@/store/hooks/useWebSocket";
import { yawToAngle } from "@/utils/utils";
import useUrl from "@/hooks/useUrl";
import { createVehicleInfoWindowConfig } from "@/utils/infoWindowUtils";

const Dashboard = () => {
	const { query } = useUrl();
	const vinCode = query.get("vin");
	const [realTimePoint, setRealTimePoint] = useState<any>(null); //车辆实时位置
	const [realTimeData, setRealTimeData] = useState<any>(null); //车辆实时位置

	useWebSocket({
		url: `wss://software.hugesuccess.cn/ws/realtime/${vinCode}`,
		onMessage: (data: any) => {
			// console.log('Received data:', data);
			const result = data?.data;
			console.log(result, "result");
			// 使用工具函数创建车辆信息窗口配置
			const vehicleData = {
				plateNo: result?.plateNo,
				vin: vinCode,
				vehicleType: result?.vehicleType,
				soc: result?.soc,
				speed: result?.speed,
				yaw: result?.yaw,
				vehicleStatus: result?.vehicleStatus,
				taskStatus: result?.taskStatus,
				anomalousStatus: result?.anomalousStatus
			};

			setRealTimePoint({
				position: [result?.longitude, result?.latitude], // [longitude, latitude]
				title: "车辆实时位置",
				icon: "/images/icon-map-car.png", // custom icon URL
				hoverText: "车辆实时位置",
				angle: yawToAngle(result?.yaw, "deg"),
				// 添加车辆基本信息
				vehicleInfo: vehicleData,
				// 使用工具函数配置信息窗口
				infoWindow: createVehicleInfoWindowConfig(vehicleData, {
					showOnHover: true,
					showOnClick: false,
					offset: [0, -30],
					closeWhenClickMap: true
				})
			});
			setRealTimeData(result);
		}
	});
	return (
		<div className={styles.container}>
			<div className={styles.mapContent}>
				<AMap mapStyle={"blue"} realTimeMaker={realTimePoint} />
			</div>
			<Header type="detail" />
			<MidModule realTimeData={realTimeData} />
			<div className={styles.leftModule}>
				<CarInfo />
				<TaskPie boxClass={styles.mt20} />
				<TimeTrend boxClass={styles.mt20} />
			</div>
			<div className={styles.rightModule}>
				<Camera />
			</div>
		</div>
	);
};
export default memo(Dashboard);
